import QtQuick 2.0
import "../../js/UI.js" as Style

Item {
    id: m_ButtonBar_id
    property alias m_text: m_text_id.text
    property alias m_source: m_Img_id.source
    property alias m_color: m_text_id.color
    property alias m_textunread: textunread.text
    signal clickSignal
    Column{
        id: rect_img
        anchors.centerIn: parent
        spacing: m_ButtonBar_id.height * 0.1
        Item {
            height: m_ButtonBar_id.height * 0.5
            width: m_ButtonBar_id.width
            Image {
                id: m_Img_id
                sourceSize: Qt.size(parent.height,parent.height)
                anchors.centerIn: parent;
            }
        }
        Item {
            height: m_ButtonBar_id.height * 0.2
            width: m_ButtonBar_id.width
            AText {
                id: m_text_id
                font.pixelSize: m_ButtonBar_id.height * 0.2
                anchors.centerIn: parent;
            }
        }
    }
    Rectangle{
        id: unreadrect
        visible: textunread.text.length > 0 && textunread.text!=="0"
        anchors{
            right: parent.right
            rightMargin: m_lineValue*0.1
            top: parent.top
            topMargin: m_lineValue*0.1
        }
        color: "red"
        width: textunread.width+m_lineValue*0.2
        height: textunread.height
        radius: m_lineValue*0.2
        AText {
            id:textunread
            anchors.centerIn: unreadrect
            color: "#ffffff"
            font.pointSize: 16
            text:""
        }
    }

    MouseArea {
        id: mouse_font
        anchors.fill: parent
        onClicked: {
            m_ButtonBar_id.focus = true
            clickSignal()
        }

    }
    states: State {
        name: "checked"; when: mouse_font.pressed
        PropertyChanges { target: m_Img_id; source: modelData.icon.active;}
        PropertyChanges { target: m_text_id; color: Style.textCommonColor;}
    }
}

